<!--
 * @Author: TKH
 * @Date: 2021-06-07 15:44:23
 * @LastEditTime: 2021-08-18 17:09:05
 * @Description: 程序主页
 * @FilePath: \vant-v3\src\views\Home.vue
-->
<template>
  <div class="zk-public-page" @scroll="handleScroll">
    <div class="top" v-if="scrollTop < 120">
      <div class="home_top">
        <div class="home_ellipse"></div>
        <div class="home_top_msg">
          <van-image class="home_user_img" width="60" height="60" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          <div>Tminihu</div>
        </div>
      </div>
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
      <div class="home_nav">
        <div class="home_nav_item" @click="handleToSchoollist">
          <van-icon name="home-o" size="40" color="#168B71" />
          <span>主考院校</span>
        </div>
        <div class="home_nav_item" @click="handleToSchedule">
          <van-icon name="calendar-o" size="40" color="#168B71" />
          <span>考试日程</span>
        </div>
        <div class="home_nav_item" @click="handleToMaterlist">
          <van-icon name="newspaper-o" size="40" color="#168B71" />
          <span>考试资讯</span>
        </div>
      </div>
    </div>
    <van-nav-bar class="zk-public-nav" :fixed="true" :border="false" v-if="!scrollTop < 150" />
    <div class="zk-public-list">
      <listItem :params="propParams"></listItem>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onUpdated, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { getData } from '../assets/js/api';
import list_item from '../components/list_item.vue';
export default {
  components: {
    listItem: list_item
  },
  setup() {
    /**
     * @router 引入路由
     * handleToSchedule：跳转考试日程页面
     * handleToMaterlist：跳转资讯列表页面
     * handleToSchoollist：跳转主考院校列表
     */
    const router = useRouter();
    const state = reactive({
      value: '',
      propParams: {
        pathType: 'details',
        listData: []
      },
      scrollTop: 0
    })
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    onUpdated(() => {
      console.log('onUpdated');
    })
    onUnmounted(() => {
      console.log('onUnmounted');
    })
    getData.then(res => {
      let data = {};
      for (let i = 0; i < res.length; i++) {
        data = {
          id: res[i].id,
          title: res[i].name,
          releaseDate: '2021-07-20',
          author: res[i].username,
          previewImg: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        }
        state.propParams.listData.push(data);
      }
    })
    function handleToSchedule() {
      router.push('/schedule');
    };
    function handleToMaterlist() {
      router.push('/materlist');
    };
    function handleToSchoollist() {
      router.push('/schoollist');
    };

    function handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      state.scrollTop = scrollTop;
    };

    return {
      ...toRefs(state),
      handleScroll,
      handleToSchedule,
      handleToMaterlist,
      handleToSchoollist
    };
  }
}
</script>

<style scoped>
@import url('../assets/css/public_global.css');
.top{
  background-color: var(--item-bg-color);
  border-bottom: 1px solid var(--item-border-color);
}
.home_top{
  width: 100%;
  height: 120px;
  margin-bottom: 70px;
  position: relative;
  background-color: var(--main-color);
}
.home_ellipse{
  position: absolute;
  top: 60px;
  height: 120px;
  width: 100%;
  border-radius: 50%;
  background-color: var(--main-color);
}
.home_top_msg{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 80px;
  left: calc(50% - 50px);
  text-align: center;
  line-height: 20px;
  color: var(--item-bg-color);
}
.home_user_img{
  border: 2px solid var(--border-color);
  border-radius: 5px;
}
.home_nav{
  width: 95%;
  height: 60px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.home_nav_item{
  width: 30%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.home_nav_item span{
  line-height: 24px;
  font-size: var(--rule-font-size);
  font-weight: var(--hint-font-weight);
  color: var(--main-color);
}
</style>
